<script setup>
import { ref, onMounted, onUnmounted, provide } from "vue"
// document.body.className = innerWidth < innerHeight ? "orientation" : "";
const url = window.location.href;
const getUrlParams = url => {
	const params = {};
	if (url.indexOf("?") !== -1) {
		const urls = url.split("?");
		const arr = urls[1].split("&");
		for (let i = 0, l = arr.length; i < l; i++) {
			const a = arr[i].split("=");
			params[a[0]] = decodeURIComponent(a[1]);
		}
	}
	return params;
}
// const { gradeId } = getUrlParams(url);

// 分盘时改变这个
let gradeId = 51;

if (gradeId) {
	window.gradeId = gradeId;
}
console.log('window.gradeId',window.gradeId);

// let gradeType;
// if (gradeId > 61) {
// 	gradeType = "middle"; //初中
// } else {
// 	gradeType = "primary" //小学
// }
// if (gradeId !== undefined) {
// 	localStorage.setItem("gradeId", gradeId);
// 	localStorage.setItem("gradeType", gradeType);
// }

// let storeGradeId = localStorage.getItem('gradeId');
// if (storeGradeId == 71 || storeGradeId == 81) {
// 	import('../css/font1.css')
// } else if (storeGradeId == 31 || storeGradeId == 41 || storeGradeId == 51 || storeGradeId == 61) {
// 	import('../css/font2.css')
// }

const isSafeArea = ref(false);
provide('isSafeArea', isSafeArea);

let userAgent = navigator.userAgent;
let browsers = ["Edg", "OPT"];
if (browsers.findIndex(e => userAgent.indexOf(e) !== -1) != -1) {
	isSafeArea.value = true;
}

console.log('isSafeArea', isSafeArea.value, navigator.userAgent);

const orientation = ref("")
provide('orientation', orientation);

function updateOrientation() {
	orientation.value = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
	console.log('orientation.value', orientation.value);
}


onMounted(() => {
	updateOrientation();
	window.addEventListener('resize', updateOrientation, false);
});

onUnmounted(() => {
	window.removeEventListener('resize', updateOrientation, false);
});



</script>
<template>
	<!-- <div :class="[isSafeArea || orientation == 'portrait' ? 'app-container' : 'app-container-safeArea']">
		<router-view></router-view>
	</div> -->

	<div class="app-container">
		<router-view></router-view>
	</div>
</template>
<style>
/* html {
	font-size: calc((1vmax - 1vmin) * 2.5);
} */

/* body {
	height: 100vh;
	overflow: hidden;
} */

.app-container {
	width: 100%;
	height: 100%;
}

.app-container-safeArea {
	width: 100%;
	height: 100%;
	height: calc(100% - 24px);
	padding-bottom: 24px;
}

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
	.app-container-safeArea {
		width: 100%;
		height: 100%;
		height: calc(100% - constant(safe-area-inset-bottom));
		height: calc(100% - env(safe-area-inset-bottom));
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
}

.orientation {
	height: 100vw;
	rotate: 90deg;
	scale: 2;
	translate: 0 120%;
	width: 100vh;
}
@font-face{
	font-family:"FZLTDHK--GBK1";
	src:url("../public/assets/fonts/FZLTDHK.TTF");
}
@font-face{
	font-family:"FZLTZHUNHK-GBK1";
	src:url("../public/assets/fonts/FZLTZHUNHK.TTF");
}
</style>
